<html>
<head><title>Hello Geo!</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
<script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAAbnvDoAoYOSW2iqoXiGTpYBTlJ8fgyfAsCHHaKAeDycSIN-HlVBQPL2QmfBm25WCgxO5AHIUmI6Jong&autoload=%7Bmodules%3A%5B%7Bname%3A%22maps%22%2Cversion%3A3%2Cother_params%3A%22sensor%3Dtrue%22%7D%5D%7D"></script>
<script src="js/geo-min.js" type="text/javascript"></script>
<script type="text/javascript">

google.setOnLoadCallback(function() {
	setViewport();
	initMap();
	initLayers();
});

var map;
var map_div;

function setViewport() {
	// set map size to full screen
	width = window.innerWidth ? window.innerWidth + 'px' : '100%';
	height = window.innerHeight ? window.innerHeight + 'px' : '100%';

	map_div = document.getElementById('map');
	map_div.style.width = width;
	map_div.style.height = height;
  
}

function initMap() {
	// the default map location is Denmark.
	// this will be used only if we have no geolocation success below
	var mapOptions = {
			center: new google.maps.LatLng(55.961500968488146, 10.546875),
			zoom: 7,
			mapTypeId: google.maps.MapTypeId.TERRAIN,
			mapTypeControlOptions: { style: google.maps.MapTypeControlStyle.DROPDOWN_MENU }
	};

	// initialize map
	map = new google.maps.Map(map_div, mapOptions);
	
	// detect device orientation change and adjust map viewport
	window.onresize = setViewport;
}
function initLayers() {
	var tableid = 2200813;
	
	
	var layer = new google.maps.FusionTablesLayer({
		query: {
			select: 'location',
			from: tableid
		},
		styles: [{
		  markerOptions: {
			iconName : "small_green"
		  }
		},{
		  where: "type = 'NO_DATA'",
		  markerOptions: {
			iconName : "small_blue"
		  }
		},{
		  where: "type = 'SLOW_DATA'",
		  markerOptions: {
			iconName : "small_yellow",
		  }
		},{
		  where: "type = 'LOST_CALL'",
		  markerOptions: {
			iconName : "small_red"
		  }
		}]
	});
	/*var layer2 = new google.maps.FusionTablesLayer({
		query: {
			select: 'location',
			from: tableid
		},
		heatmap: {
			enabled  : true
		}
	});*/

	layer.setMap(map);
}

</script>
<style>
body {
        margin: 0px;
}
#map {
        position: absolute;
}
</style>
</head>
<body>
<div id="map"></div>
</body>
</html>